<!--新建问题-->
<template>
  <div>
    <el-dialog title="新建问题" :visible.sync="questionShow" width="30%" @close="cancel" center>
      <el-form size="small" :model="addForm" label-position="right" :rules="FormRules" label-width="120px" ref="form"
        class="demo-form-inline">


        <el-form-item label="标题：">
          <el-input v-model="addForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item label="问题描述：" prop="content">
          <el-input type="textarea" v-model="addForm.content" placeholder="请输入问题描述"></el-input>
        </el-form-item>
        <el-form-item label=" 创建账号：" prop="memberId">
          <el-select v-model="addForm.memberId" filterable placeholder="请选择回答的账号">
            <el-option v-for="item in userOptions" :key="item.id" :label="item.nickname" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回答账号：" prop="toMemberId">
          <el-select v-model="addForm.toMemberId" filterable placeholder="请选择回答的账号">
            <el-option v-for="item in userOptions" :key="item.id" :label="item.nickname" :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="回答内容：" prop="comment">
          <el-input type="textarea" v-model="addForm.comment" placeholder="请输入回答内容"></el-input>
        </el-form-item>
        <el-form-item label="精选：" prop="choiceAnswers">
          <el-radio v-model="addForm.choiceAnswers" :label="1">是</el-radio>
          <el-radio v-model="addForm.choiceAnswers" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item label="推荐：" prop="recommendStatus">
          <el-radio v-model="addForm.recommendStatus" :label="1">是</el-radio>
          <el-radio v-model="addForm.recommendStatus" :label="0">否</el-radio>
        </el-form-item>

        <el-form-item label="虚拟热度">
          <el-input v-model="addForm.virtualCount" placeholder="请输入虚拟热度"></el-input>
        </el-form-item>

        
       
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button :disabled="isDetail" type="primary" @click="questionConfirm">提 交</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  accountList,
  addArticleApi,
  editArticle,
  getArticleDetail
} from "../../../../api/rank";
import { getArticleListTree } from "../../../../api/article";
import { fetchList } from "../../../../api/topicArticles";

export default {
  data() {
    return {
      questionShow: false,
      classOptions: [],
      relatedOptions: [],
      addForm: {
        content: "",
        toMemberId: "",
        comment: "",
        choiceAnswers: 0,
        verifyStatus: 1,
        memberId: "",
        recommendStatus: 0,
        title: ""
      },
      isDetail: false,
      FormRules: {
        title: [
          {
            required: true,
            message: "请输入标题",
            trigger: ["blur", "change"]
          }
        ],
        content: [
          {
            required: true,
            message: "请输入问题描述",
            trigger: ["blur", "change"]
          }
        ],
        toMemberId: [
          {
            required: true,
            message: "请选择回答问题账号",
            trigger: ["blur", "change"]
          }
        ],
        memberId: [
          {
            required: true,
            message: "请选择创建账号",
            trigger: ["blur", "change"]
          }
        ],
        comment: [
          {
            required: true,
            message: "请输入回答问题内容",
            trigger: ["blur", "change"]
          }
        ],
        
        // // choiceAnswers: [{required: true, message: '', trigger: ['blur', 'change']}],
        // cateId: [{required: true, message: '请选择分类', trigger: ['blur', 'change']}],
        // hotTopicId: [{required: true, message: '请选择关联话题', trigger: ['blur', 'change']}],
      },
      userOptions: []
    };
  },
  async created() {
    this.getAnswerUser();
    await this.getArtilce();
    await this.getTalkList();
  },
  methods: {


    getInfo(id) {
      getArticleDetail(id).then(res=> {
        this.addForm = Object.assign({}, this.addForm, res.data)
      })
    },
    cancel() {
      this.questionShow = false;
      this.reset()
      this.$refs.form.resetFields()
      this.$refs.form.clearValidate()
    },
    openDialog(v, type) {
      if (v) {
        this.addForm.id = v.id;
        this.getInfo(v.id)
        if(type == 'detail') {
          this.isDetail = true
        }
        if(type == 'edit') {
        }


        // DetailArticleApi(v.id).then(res => {
        //   this.addForm = res.data
        // })
      }
      this.questionShow = true;
    },
    getAnswerUser() {
      accountList().then(res => {
        this.userOptions = res.data;
      });
    },
    getArtilce() {
      getArticleListTree().then(res => {
        res.data.splice(0, 1)
        this.classOptions = res.data
      });
    },
    getTalkList() {
      fetchList({
        pageSize: 5000,
        pageNum: 1
      }).then(res => {
        res.data.list.forEach(item => {
          this.$set(item, "label", item.name);
          this.$set(item, "value", item.id);
        });
        this.relatedOptions = res.data.list;
      });
    },
    questionConfirm() {
      this.$refs.form.validate(validate => {
        if (validate) {
          let params = JSON.parse(JSON.stringify(this.addForm));
          if (this.addForm.id) {
            console.log('编辑');
            editArticle(params).then(res=> {
              this.questionShow = false;
              this.$message.success("编辑成功！");
              this.reset();
              this.$refs.form.resetFields()
              this.$refs.form.clearValidate()
              this.$emit("getList");
            })
          } else {
            params.verifyStatus = 0;
            addArticleApi(params).then(res => {
              this.questionShow = false;
              this.$message.success("新建问题成功！");
              this.reset();
              this.$refs.form.resetFields()
              this.$refs.form.clearValidate()
              this.$emit("getList");
            });
          }
        }
      });
    },
    reset() {
      this.addForm = {
        title: "",
        content: "",
        toMemberId: "",
        comment: "",
        choiceAnswers: 0,
        memberId: "",
        recommendStatus: 0,
        virtualCount: ''
      };
      this.isDetail = false
    }
  }
};
</script>

<style lang="scss" scoped>
/deep/ .el-select,
/deep/ .el-cascader {
  width: 100%;
}
</style>
